<template>
  <div class="container">
    <div class="column">
        <div class="notification">
          <button class="delete"></button>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
        </div>
        <div class="notification is-primary">
          <button class="delete"></button>
          Info lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
        </div>
        <div class="notification is-info">
          <button class="delete"></button>
          Info lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
        </div>
        <div class="notification is-success">
          <button class="delete"></button>
          Success lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
        </div>
        <div class="notification is-warning">
          <button class="delete"></button>
          Warning lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
        </div>
        <div class="notification is-danger">
          <button class="delete"></button>
          Danger lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'hello',
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
